<html lang="en">
<head>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta content="initial-scale=1, minimum-scale=1, width=device-width" name="viewport">
  <meta name="referrer" content="no-referrer"/>

  <title>Login</title>

  <meta name="google-signin-client_id" content="{{ client_id }}">
  <style>
    body {
      display: grid;
      height: 100%;

      align-items: center;
      justify-content: center;
    }
  </style>
</head>
<body>

<div class="g-signin2" data-onsuccess="onSignIn"></div>

<h4 id="error" style="display:none;"></h4>

</body>

  <script src="https://apis.google.com/js/platform.js" async defer nonce="{{ nonce }}"></script>
  <script nonce="{{ nonce }}">


    let signInBtn = document.getElementById('signinButton');
    function onSignIn(googleUser) {
      let idToken = googleUser.getAuthResponse().id_token;
      let hostedDomain = googleUser.getHostedDomain();

      fetch('./authenticate', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
          },
          body: JSON.stringify({'token': idToken, 'hd': hostedDomain})
        }
      ).then(
        response => response.json()
      ).then(
        data => {location.href = data.route}
      );
    }

  </script>
</html>
